<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
    <script type="text/javascript" charset="utf-8">
	    window.UEDITOR_HOME_URL = "/static/js/ueditor/";
	</script>
    
    <script type="text/javascript" charset="utf-8" src="/static/js/ueditor/editor_config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/js/ueditor/editor_all_min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/js/ueditor/themes/default/ueditor.css"/>
    
</head>
<body class="newversion" > 
<!-- test baidu ueditor -->
 <div id="content" class="w900 border-style1 bg">
        <div class="section">
        <h3><a href="http://www.yihaomen.com">一号门  Django UEditor 演示版</a></h3>
            <p class="note"></p>
            <div class="details">
                <div>  
                <form action="/ueditor" method="post">   
                    {%csrf_token%}
                    <textarea id="editor" name="editor" style="width:600px;height:500px;">{{article.content}}</textarea>                    
                    <input type="button" value="javascript 测试" onclick="testueditor();"/>
                    <input type="button" value="插入内容" onclick="insertueditor();"/>                   
                </form>    
                </div>
            </div>

        </div>
        <div class="section">
            <h4>常用API</h4>
            <div id="allbtn" class="details">
                <ul>
                    <li><a onclick="getContent()">获得内容</a></li>
                    <li><a onclick="setContent()">写入内容</a></li>
                    <li><a onclick="getContentTxt()">获得纯文本</a></li>
                    <li><a onclick="getPlainTxt()">获得带格式的纯文本</a></li>
                    <li><a onclick="hasContent()">判断是否有内容</a></li>
                    <li><a onclick="setFocus()">使编辑器获得焦点</a></li>
                    <li><a onclick="getText()">获得当前选中的文本</a></li>
                    <li><a onclick="deleteEditor()">删除编辑器</a></li>
                    <li><a onclick="setEnabled()">可以编辑</a></li>
                    <li><a onclick="setDisable()">不可编辑</a></li>
                </ul>
            </div>
        </div>        
   </div>

<script type="text/javascript">
    var ue=new UE.ui.Editor();
    ue.render('editor');
    ue.addListener("selectionchange",function(){
        var state = ue.queryCommandState("source");
        var btndiv = document.getElementById("btns");
        if(btndiv){
            if(state){
                btndiv.style.display = "none";
            }else{
                btndiv.style.display = "";
            }
        }

    });
    function getContent(){
        var arr = [];
        arr.push("使用editor.getContent()方法可以获得编辑器的内容");
        arr.push("内容为：");
        arr.push(ue.getContent());
        alert(arr.join("\n"));
    }
    function getPlainTxt(){
        var arr = [];
        arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
        arr.push("内容为：");
        arr.push(ue.getPlainTxt());
        alert(arr.join('\n'))
    }
    function setContent(){
        var arr = [];
        arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
        ue.setContent('欢迎使用ueditor');
        alert(arr.join("\n"));
    }

    function getText(){
        //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
        var range = ue.selection.getRange();
        range.select();
        var txt = ue.selection.getText();
        alert(txt)
    }
    
    function testueditor(){
    	mycontent=ue.getContentTxt();
    	alert(mycontent);
    }
    
    function insertueditor(){
    	ue.execCommand('insertHtml',"自定义插件，我的名片	");
    }

    function getContentTxt(){
        var arr = [];
        arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
        arr.push("编辑器的纯文本内容为：");
        arr.push(ue.getContentTxt());
        alert(arr.join("\n"));
    }
    function hasContent(){
        var arr = [];
        arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
        arr.push("判断结果为：");
        arr.push(ue.hasContents());
        alert(arr.join("\n"));
    }
    function setFocus(){
        ue.focus();

    }
    function deleteEditor(){
        var div = document.getElementById('allbtn');
        var btns = baidu.editor.dom.domUtils.getElementsByTagName(div,"a");
        for(var i=0,btn;btn=btns[i++];){
		    btn.style.cssText = "color:#ccc;text-decoration:none;cursor:default";
            btn.onclick = function(){
                return false;
            };
        }
        ue.destroy();
    }
	function setEnabled(){
	    var div = document.getElementById('allbtn');
        var btns = baidu.editor.dom.domUtils.getElementsByTagName(div,"a");
        for(var i=0,btn;btn=btns[i++];){
			btn.style.cssText = "color:#3E3E3E;text-decoration:none;cursor:pointer";
        }
	    ue.setEnabled();
	}
	function setDisable(){
	    var div = document.getElementById('allbtn');
        var btns = baidu.editor.dom.domUtils.getElementsByTagName(div,"a");
        for(var i=0,btn;btn=btns[i++];){
		    if(btn.innerHTML != "可以编辑"){
				btn.style.cssText = "color:#ccc;text-decoration:none;cursor:default";
			}
        }
	    ue.setDisabled("fullscreen");
	}
	
</script>

<!-- baidu ueditor end -->
</body>
</html>